<template>
  <el-row justify="end">
    <el-button @click="openForm">
      <Icon class="mr-5px" icon="ep:edit" />
      {{ operation.id ? '编辑运营信息' : '新增工商信息' }}
    </el-button>
  </el-row>
  <ContentWrap>
    <el-collapse v-model="activeNames" class="">
      <el-collapse-item name="basicInfo">
        <template #title>
          <span class="text-base font-bold">基本信息</span>
        </template>
        <el-descriptions :column="3">
          <el-descriptions-item label="客户名称">{{ operation.customerName }}</el-descriptions-item>
          <el-descriptions-item label="统计月份">{{
            formatDate(operation.date, 'YYYY-MM')
          }}</el-descriptions-item>
          <el-descriptions-item label="运营经理">{{
            operation.operationManagerName
          }}</el-descriptions-item>
          <el-descriptions-item label="营业状态">
            <dict-tag :type="DICT_TYPE.CRM_BUSINESS_STATUS" :value="operation.businessStatus" />
          </el-descriptions-item>
          <el-descriptions-item label="细分行业">
            <dict-tag :type="DICT_TYPE.CRM_INDUSTRY_CATEGORY" :value="operation.industryCategory" />
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
    </el-collapse>
  </ContentWrap>

  <el-divider content-position="left">经营数据（单位：万元）</el-divider>

  <el-table :data="formDataDebt" class="-mt-10px">
    <el-table-column label="序号" type="index" width="100" />
    <el-table-column
      align="center"
      min-width="150"
      label="设备抵押情况"
      prop="mortgageEquipmentSituation"
    >
      <template #default="scope">
        <dict-tag
          :type="DICT_TYPE.CRM_MORTGAGE_EQUIPMENT_SITUATION"
          :value="scope.row.mortgageEquipmentSituation"
        />
      </template>
    </el-table-column>
    <el-table-column label="设备抵押估值" min-width="150" prop="equipmentMortgageValuation" />
    <el-table-column
      align="center"
      min-width="150"
      label="个人担保情况"
      prop="personalGuaranteeSituation"
    >
      <template #default="scope">
        <dict-tag
          :type="DICT_TYPE.CRM_PERSONAL_GUARANTEE_SITUATION"
          :value="scope.row.personalGuaranteeSituation"
        />
      </template>
    </el-table-column>
    <el-table-column label="租金配套欠费" min-width="150" prop="rent" />
    <el-table-column label="供应链欠费" min-width="150" prop="supplyChain" />
    <el-table-column label="园区总欠费（万元）" min-width="150" prop="allFee" />
    <el-table-column label="欠薪金额" min-width="150" prop="backPayAmount" />
    <el-table-column label="银行贷款" min-width="150" prop="loan" />
    <el-table-column label="其它社会债务" min-width="150" prop="otherDebts" />
    <el-table-column label="总负债估算（万元）" min-width="150" prop="allDebt" />
    <el-table-column label="产值（万元）" min-width="150" prop="outputAmount" />
    <el-table-column label="主要客户货款回笼周期（月）" min-width="180" prop="paymentCycle" />
    <el-table-column label="其他经营概况描述" min-width="500" prop="otherSituations" />
  </el-table>

  <el-divider content-position="left">用工情况</el-divider>

  <el-table :data="formDataEmployment" class="-mt-10px">
    <el-table-column label="序号" type="index" width="100" />
    <el-table-column label="现有员工人数" min-width="150" prop="totalEmp" />
    <el-table-column label="缺工人数" min-width="150" prop="shortageEmp" />
    <el-table-column align="center" min-width="150" label="是否有集体裁员计划" prop="isLayoffPlan">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isLayoffPlan" />
      </template>
    </el-table-column>
    <el-table-column label="计划裁员人数" min-width="150" prop="layoffs" />
    <el-table-column
      align="center"
      min-width="150"
      label="是否有降薪计划"
      prop="isSalaryReductionPlan"
    >
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isSalaryReductionPlan" />
      </template>
    </el-table-column>
    <el-table-column label="计划降薪幅度（%）" min-width="150" prop="salaryReductionRange" />
    <el-table-column align="center" min-width="150" label="是否欠薪" prop="isBackPay">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isBackPay" />
      </template>
    </el-table-column>
    <el-table-column label="欠薪月数" min-width="150" prop="backPayDuration" />
    <el-table-column label="欠薪人数" min-width="150" prop="backPay" />
  </el-table>

  <el-divider content-position="left">生产数据</el-divider>

  <el-table :data="formDataOrder" class="-mt-10px">
    <el-table-column label="序号" type="index" width="100" />
    <el-table-column label="出口订单占比（%）" min-width="150" prop="exportOrderRate" />
    <el-table-column label="内销订单占比（%）" min-width="150" prop="domesticOrderRate" />
    <el-table-column label="产能利用率（%）" min-width="150" prop="capacityRate" />
    <el-table-column
      label="当月订单饱和度（%）"
      min-width="150"
      prop="monthlyOrderSaturationRate"
    />
    <el-table-column label="开工天数" min-width="150" prop="workingDays" />
  </el-table>

  <!-- 表单弹窗：添加 -->
  <OperationForm ref="formRef" @success="refresh" />

</template>
<script setup lang="ts">
import { OperationApi, OperationVO } from '@/api/crm/operation'
import { formatDate } from '@/utils/formatTime'
import OperationForm from '@/views/crm/operation/OperationForm.vue'
import { DICT_TYPE } from '@/utils/dict'
const props = defineProps<{ id?: number; bizId?: number }>()
const route = useRoute()
const operation = ref<OperationVO>({} as OperationVO) // 企业工商信息详情
const formLoading = ref(false) // 表单的加载中
const formRef = ref()

const openForm = () => {
  formRef.value.open(operation.value.id ? 'update' : 'create', operation.value.id)
}


const formDataEmployment = ref([
  {
    totalEmp: undefined,
    shortageEmp: undefined,
    isLayoffPlan: undefined,
    layoffs: undefined,
    isSalaryReductionPlan: undefined,
    salaryReductionRange: undefined,
    isBackPay: undefined,
    backPayDuration: undefined,
    backPay: undefined
  }
])

const formDataOrder = ref([
  {
    exportOrderRate: undefined,
    domesticOrderRate: undefined,
    capacityRate: undefined,
    monthlyOrderSaturationRate: undefined,
    workingDays: undefined,
    workingHours: undefined
  }
])

const formDataDebt = ref([
  {
    rent: undefined,
    supplyChain: undefined,
    allFee: undefined,
    backPayAmount: undefined,
    loan: undefined,
    otherDebts: undefined,
    allDebt: undefined,
    outputAmount: undefined,
    paymentCycle: undefined,
    mortgageEquipmentSituation: undefined,
    equipmentMortgageValuation: undefined,
    personalGuaranteeSituation: undefined,
    otherSituations: undefined
  }
])

const formData = ref({
  id: undefined,
  customerId: undefined,
  customerDefault: false,
  date: undefined,
  operationManager: undefined,
  businessStatus: undefined,
  industryCategory: undefined,
  mortgageEquipmentSituation: undefined,
  equipmentMortgageValuation: undefined,
  personalGuaranteeSituation: undefined,
  otherSituations: undefined,
  rent: undefined,
  supplyChain: undefined,
  allFee: undefined,
  backPayAmount: undefined,
  loan: undefined,
  otherDebts: undefined,
  allDebt: undefined,
  outputAmount: undefined,
  paymentCycle: undefined,
  totalEmp: undefined,
  shortageEmp: undefined,
  isLayoffPlan: undefined,
  layoffs: undefined,
  isSalaryReductionPlan: undefined,
  salaryReductionRange: undefined,
  isBackPay: undefined,
  backPayDuration: undefined,
  backPay: undefined,
  exportOrderRate: undefined,
  domesticOrderRate: undefined,
  capacityRate: undefined,
  monthlyOrderSaturationRate: undefined,
  workingDays: undefined,
  workingHours: undefined
})

const refresh = async () => {
  try {
    formLoading.value = true
    const data = await OperationApi.getOperation(props.id || route.params.id)
    formData.value = data
    Object.keys(formDataDebt.value[0]).forEach((key) => {
      if (formDataDebt.value[0].hasOwnProperty(key)) {
        formDataDebt.value[0][key] = formData.value[key]
      }
    })
    Object.keys(formDataEmployment.value[0]).forEach((key) => {
      if (formDataEmployment.value[0].hasOwnProperty(key)) {
        formDataEmployment.value[0][key] = formData.value[key]
      }
    })
    Object.keys(formDataOrder.value[0]).forEach((key) => {
      if (formDataOrder.value[0].hasOwnProperty(key)) {
        formDataOrder.value[0][key] = formData.value[key]
      }
    })
    if (!data) {
      return
    }
    operation.value = data
  } finally {
    formLoading.value = false
  }
}

const activeNames = ref(['basicInfo', 'systemInfo']) // 展示的折叠面板

/** 初始化 */
onMounted(async () => {
  const id = props.id || route.params.id
  try {
    formLoading.value = true
    if (id) {
      const data = await OperationApi.getOperation(id)
      formData.value = data
      Object.keys(formDataDebt.value[0]).forEach((key) => {
        if (formDataDebt.value[0].hasOwnProperty(key)) {
          formDataDebt.value[0][key] = formData.value[key]
        }
      })
      Object.keys(formDataEmployment.value[0]).forEach((key) => {
        if (formDataEmployment.value[0].hasOwnProperty(key)) {
          formDataEmployment.value[0][key] = formData.value[key]
        }
      })
      Object.keys(formDataOrder.value[0]).forEach((key) => {
        if (formDataOrder.value[0].hasOwnProperty(key)) {
          formDataOrder.value[0][key] = formData.value[key]
        }
      })
      if (!data) {
        return
      }
      operation.value = data
    }
  } finally {
    formLoading.value = false
  }
})
</script>
